<template>
  <div>
    <div class="page" v-if="state.showBg">
      <div>
        <svg @click="goBack"
             :style="{width:state.showBg?'60px':'40px',height:state.showBg?'60px':'40px',left:state.showBg?'20px':'0'}"
             class="jump_icon"
             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M24.95 26.95a1 1 0 0 0 0-1.415L21.414 22l3.536-3.535a1 1 0 0 0-1.414-1.415l-4.243 4.243a1 1 0 0 0 0 1.414l4.243 4.243a1 1 0 0 0 1.414 0Z"
                fill="#415058"></path>
        </svg>
        <div class="bg"></div>
      </div>
      <!-- 左侧 -->
      <el-avatar v-if="state.user.imageUrl && state.user.imageUrl!=''"  class="avatar_img"  :size="50" :src="state.user.imageUrl" />
      <div v-else class="avatar">{{ state.user.nickName }}</div>
      <div class="left" style="text-align:center;">
        <div class="name shenglue">{{ state.user.nickName }}</div>
        <div class="intru shenglue" v-if="state.bisInfo.isAccredit==1">推荐码：{{ state.bisInfo.accreditCode }}</div>
        <div class="intru shenglue">手机号：{{ state.bisInfo.cellPhone !== '' ? state.bisInfo.cellPhone : '未绑定' }}
        </div>
        <div class="intru shenglue">身份：{{ state.bisInfo.isAccredit == 1 ? '授权商' : '普通用户' }}</div>
        <div class="intru shenglue tips">不鼓励私下交易，如有资金来往请谨慎</div>
        <el-button class="btn1 " style="background:#1684fc;bottom: 80px;border-color:#1684fc;color:#fff;" type="primary" @click="state.showInfo = true">编辑资料</el-button>
        <div class="btn1" v-if=" state.bisInfo.isAccredit==0 && state.bisInfo.isApplyAudit==0" @click="state.showBis=true">升级授权商</div>
      </div>

      <!-- 右侧 -->
      <div class="right">
        <div style="white-space: nowrap;" @click="release" :class="[state.tabIndex==1 ?'actived':'']">发布项目</div>
        <div style="white-space: nowrap;" @click="natural" :class="[state.tabIndex==4 ?'actived':'']">发布资源</div>
        <div style="white-space: nowrap;" @click="buy" :class="[state.tabIndex == 2 ? 'actived':'']">购买项目</div>
        <div style="white-space: nowrap;" @click="translate" :class="[state.tabIndex== 3 ? 'actived':'']">收益</div>

      </div>
      <div class="content">
        <!-- 商品 -->
        <article class="goods" v-loading="state.loading" v-if="state.tabIndex==1">
          <!-- todo 修改位置-->
          <section v-for="(item,index) in state.goodsList" :key="index" class="good">
            <div @click="toUrl(item)">
              <img class="pic" :src="item.productImg"/>
              <div v-if="item.productIsPutaway==0" style="width:calc(100% - 10px);bottom: 82px;" class="goods_status">
                已下架
              </div>
              <div v-else-if="item.auditStatus||item.auditStatus==0" class="goods_status">
                {{ item.auditStatus == 0 ? '审核中' : (item.auditStatus == 1 ? '审核通过' : '审核拒绝') }}
              </div>
              <div v-else></div>
              <section class="name shenglue">{{ item.productTitle }}</section>
              <section class="user">
                <section class="center user_name shenglue" style="flex-wrap: nowrap;">
                  <img :src="item.userImageUrl" class="logo"/>
                  <div class="shenglue">{{ item.userNickName }}</div>
                </section>
                <section style="font-size:12px;">
                  <svg v-if="item.downNum" xmlns="http://www.w3.org/2000/svg" class="actionIcon" viewBox="0 0 12 11">
                    <path
                        d="M7.207 0a.5.5 0 0 1 .5.5v4h3.721a.5.5 0 0 1 .34.867l-5.222 4.82a.5.5 0 0 1-.678 0L.646 5.367a.5.5 0 0 1 .34-.867l3.72-.001V.5a.5.5 0 0 1 .5-.5h2z"
                        fill="#A4ADB3" fill-rule="evenodd"></path>
                  </svg>
                  <span v-if="item.downNum">{{ item.downNum }}</span>
                  <svg v-if="item.tapNum" xmlns="http://www.w3.org/2000/svg" class="actionIcon"
                       style="margin-left:15px;" viewBox="0 0 12 11">
                    <path
                        d="M5.5.179a1.5 1.5 0 0 1 1.467 1.187c.122.596.18 1.091.204 3.004l-.002-.107H9.66a1 1 0 0 1 .959 1.285l-1.407 4.737a1 1 0 0 1-.958.715H1a1 1 0 0 1-1-1V6.268a1 1 0 0 1 1-1h.977C3.29 5.25 3.966 4.054 4 1.678a1.5 1.5 0 0 1 1.5-1.5z"
                        fill="#A4ADB3" fill-rule="evenodd"></path>
                  </svg>
                  <span v-if="item.tapNum">{{ item.tapNum }}</span>
                </section>
              </section>
            </div>
          </section>
          <div class="goods_end" v-if="state.goodsList.length>=state.total && state.goodsList.length!=0">已经到底啦~
          </div>
        </article>
        <article class="jiaoyi" v-if="state.tabIndex==2">
          <section class="styles__StyledOrderListTable-sc-x8p64o-2 inowa orders-table template">
            <div class="order-head">
              <span class="head-item">订单号</span>
              <span class="head-item">交易状态</span>
              <span class="head-item">交易金额（元）</span>
              <span class="head-item">交易内容</span>
              <span class="head-item">创建时间</span>
              <span class="head-item">操作</span>
            </div>
            <ul class="order-items">
              <li class="order-item template" v-for="(item,index) in state.tableData" :key="index">
                <div class="content-item">{{ item.orderCode }}</div>
                <div class="content-item">{{ state.statusOp[item.status] }}</div>
                <div class="content-item amount">¥{{ item.totalPayPrice }}</div>
                <div class="content-item link">
                  <div class="shenglue" style="color:#1684fc;width:90%;cursor: pointer"
                       @click="navigateTo(`/project/details/${item.items[0].productId}`)">
                    {{ item.items[0].productName }}
                  </div>
                </div>
                <div class="content-item">{{ item.createTime }}</div>
                <div class="content-item buttons">
                  <button class="charge" v-if="item.status==0" @click="state.showOrder=true; state.orderCode=item.orderCode;pay()">立即支付</button>
                  <button class="charge" style="background:#ff5200;" v-if="item.status==2" @click="download(item.orderCode)">立即下载</button>
                </div>
              </li>
            </ul>
          </section>
        </article>
        <article class="jiaoyi" v-if="state.tabIndex==3">
          <el-row class="income">
            <el-col :span="24">
              <el-card shadow="never" class="total-income">
                <div slot="header" class="clearfix">
                  <span>收益总览</span>
                  <el-button size="small" style="float: right; padding: 3px 0" type="primary">提现</el-button>
                </div>
                <el-row :gutter="20">
                  <el-col :span="7">
                    <div class="grid-content bg-purple" style="margin: 0 auto">
                      <div class="amount-container">
                      <span class="amount large">
                        <div class="sign">¥</div><div class="amount-number">{{ incomeTotal.allEarnAmount }}</div>
                      </span><span class="des">累计收益</span></div>
                    </div>
                  </el-col>
                  <el-col :span="1" style="padding-left: 0px; padding-right: 0px;">
                    <div class="separate-line"></div>
                  </el-col>
                  <el-col :span="7">
                    <div class="grid-content bg-purple">
                      <div class="amount-container">
                      <span class="amount large">
                        <div class="sign">¥</div><div class="amount-number">{{ incomeTotal.earnAmount }}</div>
                      </span><span class="des">可提现金额</span></div>
                    </div>
                  </el-col>
                  <el-col :span="1" style="padding-left: 0px; padding-right: 0px;">
                    <div class="separate-line"></div>
                  </el-col>
                  <el-col :span="7">
                    <div class="grid-content bg-purple">
                      <div class="amount-container">
                      <span class="amount large">
                        <div class="sign">¥</div><div class="amount-number">{{ incomeTotal.withdrawAmount }}</div>
                      </span><span class="des">已提现金额</span></div>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
          <!--收益明细-->
          <el-row>
            <el-col :span="24">
              <el-card shadow="never">
                <div slot="header" class="clearfix">
                  <span>收益明细</span>
                </div>
                <el-tabs v-model="state.income" @tab-click="handleClick">
                  <el-tab-pane label="收益" name="income">
                    <el-table :data="state.accountList" >
                      <el-table-column prop="businessCode" label="收益号" width="220"/>
                      <el-table-column prop="itemTypeText" label="收益类型" width="220"/>
                      <el-table-column prop="itemAmount" label="收益金额">
                        <template #default="scope">
                          ¥{{ scope.row.itemAmount }}
                        </template>
                      </el-table-column>

                    </el-table>

                  </el-tab-pane>
                  <el-tab-pane label="提现" name="withdraw">
                    <el-table :data="state.withdrawList" border >
                      <el-table-column prop="businessCode" label="业务号" />
                      <el-table-column prop="withdrawAmount" label="提现金额" />
                      <el-table-column prop="withdrawTime" label="提现时间" />
                      <el-table-column prop="statusText" label="审核状态" />
                      <el-table-column prop="failMsg" label="失败消息" />
                      <el-table-column prop="anewApply" label="申请标识" >
                        <template #default="scope">
                          {{scope.row.anewApply === 0 ? "首次申请" :"重新申请"}}
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-card>
            </el-col>
          </el-row>
        </article>
        <article class="goods" style="margin-top: 0;" v-if="state.tabIndex==4">
          <div class="natural-card">
            <resourceList :articleList="state.goodsList" page="my" @toEdit="toEdit" @toDelete="toDelete"></resourceList>
          </div>
        </article>
        <div class="center"
             v-if="(state.tabIndex==1 && state.goodsList.length==0)||(state.tabIndex==2&& state.tableData.length==0) || (state.tabIndex==4 && state.goodsList.length==0)"
             style="margin-top:-200px;">
          <img style="width:150px;" src="https://pay.huijinwei.com/oilAdmin/assets/not_data.7ccb6760.png"/>
          <div class="des" style="width:100%;">
            这里什么都没有哦，快去{{ (state.tabIndex == 1 || state.tabIndex == 4) ? '发布' : '购买' }}自己的第一个{{state.tabIndex == 1?'项目':'资源'}}吧~
          </div>
        </div>
      </div>
      <!-- 发布 -->
      <NuxtLink to="/release">
        <div class="ibGpke">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon upload-icon" viewBox="0 0 28 24">
            <path
                d="M14 12.703l5.397 5.09-1.8 1.699-2.325-2.194V24h-2.544v-6.704l-2.325 2.196-1.8-1.698L14 12.704zM14 0c4.52 0 8.324 3.196 8.845 7.433 3.266.84 5.426 3.767 5.128 6.948-.298 3.182-2.969 5.706-6.34 5.993L21.63 18c.004-3.927-3.327-7.132-7.488-7.206-4.161-.074-7.618 3.012-7.77 6.936l-.005.27v2.374c-3.372-.287-6.042-2.81-6.34-5.992-.299-3.182 1.86-6.109 5.127-6.95C5.675 3.197 9.479 0 14 0z"
                fill="#FFF" fill-rule="nonzero"></path>
          </svg>
          <span>发</span><span>布</span><span>素</span><span>材</span>
        </div>
      </NuxtLink>
    </div>
    <div class="page" style="padding:10px;margin:0;" v-else>
      <div>
        <svg @click="goBack"
             :style="{width:state.showBg?'60px':'40px',height:state.showBg?'60px':'40px',left:state.showBg?'20px':'0'}"
             class="jump_icon"
             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44">
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M24.95 26.95a1 1 0 0 0 0-1.415L21.414 22l3.536-3.535a1 1 0 0 0-1.414-1.415l-4.243 4.243a1 1 0 0 0 0 1.414l4.243 4.243a1 1 0 0 0 1.414 0Z"
                fill="#415058"></path>
        </svg>
        <div class="bg" style="left:0;right:0;top:0;"></div>
        <img v-if="state.user.imageUrl && state.user.imageUrl!=''" class="avatar_img"
             style="margin:20px calc(50% - 70px) 0px;"
             :src="state.user.imageUrl"/>
        <div v-else class="avatar" style="margin:20px auto 0;">{{ state.user.nickName.slice(0, 1) }}</div>
        <!-- <div class="avatar">{{ user.nickName.slice(0,1) }}</div> -->
        <div v-if="state.bisInfo.isAccredit==1" style="text-align:center;color:#999;margin:16px 10px;">
          推荐码：{{ state.bisInfo.accreditCode }}
        </div>
        <div style="display:flex;align-items:center;justify-content: center;margin:10px 0;">
          <el-button :style="{width:state.bisInfo.isAccredit==0 && state.bisInfo.isApplyAudit==0?'150px':'260px'}"
                     style="background:#1684fc;border-color:#1684fc;" type="primary" @click="state.showInfo=true">编辑资料
          </el-button>
          <el-button style="width:150px;" v-if="state.bisInfo.isAccredit==0 && state.bisInfo.isApplyAudit==0"
                     @click="state.showBis=true">
            升级授权商
          </el-button>
        </div>
      </div>
      <el-tabs v-model="state.phoneTag" @tab-click="tabClick">
        <el-tab-pane label="发布项目" name="1">
          <article class="goods" style="width:100%;margin:0;" v-loading="state.loading">
            <section v-for="(item,index) in state.goodsList" :key="index" class="good_phone">
              <div @click="toUrl(item)">
                <img style="width: 100%;height:160px;border-radius: 8px;" :src="item.productImg"/>
                <div v-if="item.productIsPutaway==0" style="width:calc(100% - 10px);bottom: 82px;" class="goods_status">
                  已下架
                </div>
                <div v-else-if="item.auditStatus||item.auditStatus==0" style="width:calc(100% - 10px);bottom: 82px;"
                     class="goods_status">
                  {{ item.auditStatus == 0 ? '审核中' : (item.auditStatus == 1 ? '审核通过' : '审核拒绝') }}
                </div>
                <div v-else></div>
                <section class="name shenglue">{{ item.productTitle }}</section>
                <section class="user">
                  <section class="center user_name shenglue" style="flex-wrap: nowrap;"
                           :style="{'width':state.showBg?'50%':'100%'}">
                    <img :src="item.userImageUrl" class="logo"/>
                    <section>{{ item.userNickName }}</section>
                  </section>
                  <section style="font-size:12px;color:#999;text-align:right;" v-if="state.showBg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="actionIcon" viewBox="0 0 12 11">
                      <path
                          d="M7.207 0a.5.5 0 0 1 .5.5v4h3.721a.5.5 0 0 1 .34.867l-5.222 4.82a.5.5 0 0 1-.678 0L.646 5.367a.5.5 0 0 1 .34-.867l3.72-.001V.5a.5.5 0 0 1 .5-.5h2z"
                          fill="#A4ADB3" fill-rule="evenodd"></path>
                    </svg>
                    {{ item.downNum }}
                    <svg xmlns="http://www.w3.org/2000/svg" class="actionIcon" style="margin-left:15px;"
                         viewBox="0 0 12 11">
                      <path
                          d="M5.5.179a1.5 1.5 0 0 1 1.467 1.187c.122.596.18 1.091.204 3.004l-.002-.107H9.66a1 1 0 0 1 .959 1.285l-1.407 4.737a1 1 0 0 1-.958.715H1a1 1 0 0 1-1-1V6.268a1 1 0 0 1 1-1h.977C3.29 5.25 3.966 4.054 4 1.678a1.5 1.5 0 0 1 1.5-1.5z"
                          fill="#A4ADB3" fill-rule="evenodd"></path>
                    </svg>
                    {{ item.tapNum }}
                  </section>
                </section>
              </div>
            </section>
            <div class="goods_end" v-if="state.goodsList.length >= state.total && state.goodsList.length!=0">
              已经到底啦~
            </div>
          </article>
        </el-tab-pane>
        <el-tab-pane label="购买项目" name="2">
          <article class="jiaoyi" v-for="(item,index) in state.tableData" :key="index"
                   style="min-height:200px;margin:0 0 10px;">
            <div class="order_item">
              <div>订单号</div>
              <div>{{ item.orderCode }}</div>
            </div>
            <div class="order_item">
              <div>交易状态</div>
              <div>{{ state.statusOp[item.status] }}</div>
            </div>
            <div class="order_item">
              <div>交易金额（元）</div>
              <div style="color: rgb(255, 113, 0);">￥{{ item.totalPayPrice }}</div>
            </div>
            <div class="order_item">
              <div>交易内容</div>
              <div><a class="ellipsis" style="color:#1684fc;"
                      :href="`/components/about?productId=${item.items[0].productId}`" target="_blank" rel="noreferrer">{{
                  item.items[0].productName
                }}</a></div>
            </div>
            <div class="order_item">
              <div>创建时间</div>
              <div>{{ item.createTime }}</div>
            </div>
            <div class="order_item" v-if="item.status==0">
              <div>操作</div>
              <div>
                <button class="charge" @click="state.showOrder=true;state.orderCode=item.orderCode;pay()">立即支付
                </button>
              </div>
            </div>
            <div class="order_item" v-if="item.status==2">
              <div>操作</div>
              <div>
                <button class="charge" style="background:#ff5200;" @click="download(item.orderCode)">立即下载</button>
              </div>
            </div>
          </article>
        </el-tab-pane>
        <el-tab-pane label="收益" name="3">
          <el-col :span="24">
            <el-card shadow="never" class="total-income">
              <div slot="header" class="clearfix">
                <span>收益总览</span>
                <el-button size="small" style="float: right; padding: 3px 0" type="primary">提现</el-button>
              </div>
              <el-row :gutter="20" style="padding-top: 33px">
                <el-col :span="7">
                  <div class="grid-content bg-purple" style="margin: 0 auto">
                    <div class="amount-container">
                      <span class="amount large">
                        <div class="sign">¥</div><div class="amount-number">{{ incomeTotal.allEarnAmount }}</div>
                      </span><span class="des">累计收益</span></div>
                  </div>
                </el-col>
                <el-col :span="1" style="padding-left: 0px; padding-right: 0px;">
                  <div class="separate-line"></div>
                </el-col>
                <el-col :span="7">
                  <div class="grid-content bg-purple">
                    <div class="amount-container">
                      <span class="amount large">
                        <div class="sign">¥</div><div class="amount-number">{{ incomeTotal.earnAmount }}</div>
                      </span><span class="des">可提现</span></div>
                  </div>
                </el-col>
                <el-col :span="1" style="padding-left: 0px; padding-right: 0px;">
                  <div class="separate-line"></div>
                </el-col>
                <el-col :span="7">
                  <div class="grid-content bg-purple">
                    <div class="amount-container">
                      <span class="amount large">
                        <div class="sign">¥</div><div class="amount-number">{{ incomeTotal.withdrawAmount }}</div>
                      </span><span class="des">已提现</span></div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <!--收益明细-->
          <el-row>
            <el-col :span="24">
              <el-card shadow="never">
                <div slot="header" class="clearfix"><span>收益明细</span></div>
                <el-tabs v-model="state.income" @tab-click="handleClick">
                  <el-tab-pane label="收益" name="income" style="width: 100%">
                    <el-space direction="vertical">
                      <article class="jiaoyi" v-for="(item,index) in state.accountList" :key="index"
                               style="min-height:200px;margin:0 0 10px;">
                        <div class="order_item">
                          <div>收益号</div>
                          <div>{{ item.businessCode }}</div>
                        </div>
                        <div class="order_item">
                          <div>收益内容</div>
                          <div style="color: rgb(255, 113, 0);">￥{{ item.itemAmount }}</div>
                        </div>
                        <div class="order_item">
                          <div>收益金额</div>
                          <div>{{ item.itemTypeText }}</div>
                        </div>
                        <div class="order_item">
                          <div>收益时间</div>
                          <div>{{ item.createTime }}</div>
                        </div>
                      </article>
                    </el-space>

                  </el-tab-pane>
                  <el-tab-pane label="提现1" name="withdraw">
                    <article class="jiaoyi" v-for="(item,index) in state.withdrawList" :key="index" style="min-height:200px;margin:0 0 10px;">
                      <div class="order_item">
                        <div>提现编号</div>
                        <div>{{ item.businessCode }}</div>
                      </div>
                      <div class="order_item">
                        <div>提现金额</div>
                        <div>{{ item.withdrawAmount }}</div>
                      </div>
                      <div class="order_item">
                        <div>提现状态</div>
                        <div>{{ item.statusText }}</div>
                      </div>
                      <div class="order_item">
                        <div>提现时间</div>
                        <div>{{ item.withdrawTime }}</div>
                      </div>
                    </article>
                  </el-tab-pane>
                </el-tabs>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="确认订单" :visible.sync="state.showOrder" :width="state.showBg?'680px':'330px'">
      <div class="order" v-loading="state.orderLoading">
        <div :style="{display:state.showBg?'flex':''}">
          <img :src="state.payUrl" style="width:150px;" :style="{margin:state.showBg?'':'0 50px'}"/>
          <div style="margin-left:25px;">
            <div class="price"><span style="color:#333;">应付金额：</span><span>￥</span>{{ state.totalFee }}</div>
            <div class="pay_method"><img src="../../assets/weChat.png"/>微信扫码支付</div>
          </div>
        </div>
      </div>
      <div style="margin:20px 0;font-weight:600;">*所有付费项目购买后享有项目包内页面、组件等所有元素的永久使用权</div>
    </el-dialog>
    <el-dialog
        :close-on-click-modal=false
        :close-on-press-escape=false
        draggable
        title="修改用户信息"
        v-model="state.showInfo"
        :width="state.showBg?'600px':'95%'">
      <el-form ref="form" :model="state.form" :label-width="state.showBg ? '100px':'75px'">
        <el-form-item label="姓名" required>
          <el-input v-model="state.form.nickName" placeholder="请填写您的姓名"></el-input>
        </el-form-item>
        <el-form-item label="头像" required>
          <el-upload
              class="avatar-uploader"
              action="https://xunyingcloud.cn/xcp/api/file/upload"
              :show-file-list="false" :data="{type: 4}"
              accept="image/png, image/jpeg, image/jpg"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="state.form.imageUrl" :src="state.form.imageUrl" style="width:100px;height:100px;border-radius:6px;">
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="手机号" required>
          <el-input v-model="state.form.mobile" :disabled="state.bisInfo.cellPhone!=''" placeholder="请填写您的手机号"
                    oninput="if(value.length>11)value=value.slice(0,11)" type="number"></el-input>
        </el-form-item>
        <el-form-item label="验证码" required>
          <el-input style="position: relative;" v-model.trim="state.form.code" type="number"
                    oninput="if(value.length>4)value=value.slice(0,4)" placeholder="请输入4位数验证码"/>
          <el-button type="text" style="position: absolute;right:20px;" @click="getCode(state.form)">
            {{ state.codeText }}
          </el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="state.showInfo = false">取 消</el-button>
                <el-button type="primary" @click="submitInfo">确 定</el-button>
            </span>
    </el-dialog>
    <el-dialog title="升级授权商"  v-model="state.showBis" :width=" state.showBg ?'600px':'95%'">
      <el-form ref="state.businessForm" :model="state.businessForm" :label-width="state.showBg?'100px':'75px'">
        <el-form-item label="微信号" required>
          <el-input v-model="state.businessForm.wechat" placeholder="请填写您的微信号"></el-input>
        </el-form-item>
        <el-form-item label="手机号" required>
          <el-input v-model="state.businessForm.mobile" type="number" placeholder="请填写您的手机号"
                    oninput="if(value.length>11)value=value.slice(0,11)"></el-input>
        </el-form-item>
        <el-form-item label="验证码" required>
          <el-input style="position: relative;" v-model.trim="state.businessForm.code" type="number"
                    oninput="if(value.length>4)value=value.slice(0,4)" placeholder="请输入4位数验证码"/>
          <el-button type="text" style="position: absolute;right:20px;" @click="getCode(state.businessForm)">
            {{ state.codeText }}
          </el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="state.showBis = false">取 消</el-button>
                <el-button type="primary" @click="submitBis">确 定</el-button>
            </span>
    </el-dialog>
<!--    文档预览-->
    <el-dialog v-model="state.viewDialogVisible" :title="state.previewTitle" width="65%">
      <iframe style="width: 100%;height: 75vh" :src="state.previewSrc"></iframe>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {  Plus } from "@element-plus/icons-vue";
import type {TabsPaneContext} from 'element-plus'
import requester from "~/utils/request";
const router = useRouter();
const route = useRoute();
import {userStore} from "~/composables/useUserStore";

const store = userStore()
// 收益总览
const incomeTotal = reactive({
      allEarnAmount: "0.00",
      earnAmount: "0.00",
      withdrawAmount: "0.00"
    }
);

const state = reactive(<any>{
  viewDialogVisible:false,
  previewSrc:"",
  previewTitle:"",
  withdrawPage: {
    pageValidate: {
      pageNo: 1,
      pageSize: 10
    },
    userCode: store.token.userCode
  },
  withdrawList:[],
  phoneTag: "1",
  account: {
    pageValidate: {
      pageNo: 1,
      pageSize: 10
    },
    userCode: ""
  },
  //收益明细列表
  accountList: [],
  income: 'income',
  width: 1400,
  showBg: true,
  showOrder: false,
  tabIndex: 1,
  loading: false,
  orderLoading: false,
  showInfo: false,
  showBis: false,
  orderCode: '',
  totalFee: '',
  payUrl: '',
  form: {
    mobile: '',
    nickName: '',
    imageUrl: '',
    code: '',
  },
  businessForm: {
    wechat: '',
    mobile: '',
    code: '',
  },
  bisInfo: {},
  user: store.token || {nickName: ''},
  pageValidate: {
    pageNo: 1,
    pageSize: 10,
  },
  total: 10,
  goodsList: [],
  isUse: false,
  tableData: [],
  statusOp: {
    0: '待支付',
    1: '',
    2: '待下载',
    3: '已获取',
    4: '已完结',
  },
  codeInterval: null,
  codeNumber: 60,
  codeText: '获取验证码',
})
const goBack = () => {
  router.back()
}

/**
 * 查看文件
 */
function viewDoc(title:string,path:string){
  state.viewDialogVisible = true
  const url = "https://view.xdocin.com/view?src=" + encodeURIComponent(path)
  state.previewTitle = title
  state.previewSrc = url
}

/**
 * 下载
 */
function downloadDoc(path: string){
  window.open(path, '_blank');
}


const handleScroll = () => {
  if (!route.path.includes('/components/my')) return;
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  let clientHeight = document.documentElement.clientHeight;
  let scrollHeight = document.documentElement.scrollHeight;
  if (scrollTop + clientHeight + 20 >= scrollHeight) {
    if ((state.state.tabIndex == 1 && state.goodsList.length == state.total) ||
        (state.state.tabIndex == 2 && state.tableData.length == state.total)) return;
    state.pageValidate.pageNo++;
    if(state.state.tabIndex == 1) getMyProductList()
    if(state.state.tabIndex == 2) getMyBuyOrderList()
    if(state.state.tabIndex == 4) getMyProductList()
  }
}

//获取用户详情
const getUserInfo = (refresh: boolean) => {
  requester.post('/api/user/getUser', {userCode: store.token.userCode,}).then((res: any) => {
    if (refresh) {
      state.user = res.data;
      store.setToken(res.data)
      return;
    }
    state.bisInfo = res.data;
    state.form.nickName = state.bisInfo.nickName;
    state.form.mobile = state.bisInfo.cellPhone;
    state.form.imageUrl = state.bisInfo.imageUrl;
  });
}

//获取我的商品列表
const getMyProductList = () => {
  let productType
  if(state.tabIndex == 1){
    productType = 1
  }
  if(state.tabIndex == 4){
    productType = 2
  }
  state.loading = true;
  requester.post('/api/user/myProductList', {
    userCode: state.user.userCode,
    pageValidate: state.pageValidate,
    productType
  }).then((res: any) => {
    if (res.code == 200) {
      state.total = res.data.count;
      state.goodsList.push(...res.data.lists);
      state.loading = false;
    }
  });
}
//获取购买订单列表
const getMyBuyOrderList = () => {
  state.loading = true;
  // if (!state.state.showBg && state.total / state.pageValidate.pageSize < state.pageValidate.pageNo) return;
  requester.post('/api/user/myBuyOrderList', {
    userCode: state.user.userCode,
    pageValidate: state.pageValidate,
  }).then((res: any) => {
    if (res.code == 200) {
      state.total = res.data.count;
      state.tableData.push(...res.data.lists);
      state.loading = false;
    }
  });
}

//进入商品详情页
const toUrl = (item: any) => {
  if (item.auditStatus == 1 && item.productIsPutaway != 0) {
    navigateTo(`/project/details/b ${item.productId}`)
  }
}

//获取验证码
const getCode = (form: any) => {
  if (!form.mobile || form.mobile == '') {
    ElMessage.error('请填写手机号')
    return
  }
  var re = /^1\d{10}$/
  if (re.test(form.mobile)) {
    if (state.codeInterval !== null) return
    requester.post('api/login/sendCode', {
      mobile: form.mobile
    }).then((res: any) => {
      if (res.code == 200) {
        ElMessage.success('已发送验证码')
        codeIntervalFunc() //更改验证码时间
      } else {
        ElMessage.error(res.msg)
      }
    })
  } else {
    ElMessage.error('手机号格式不正确')
  }
}
//提交信息
const submitBis = () => {
  if (!state.businessForm.wechat || state.businessForm.wechat == '') {
    ElMessage.warning('请输入微信号')
    return
  }
  if (!state.businessForm.mobile || state.businessForm.mobile == '') {
    ElMessage.warning('请输入手机号')
    return
  }
  if (!state.businessForm.code || state.businessForm.code == '') {
    ElMessage.warning('请输入验证码')
    return
  }
  if (state.codeText == '获取验证码') {
    ElMessage.warning('请先发送验证码')
    return
  }
  state.businessForm.userCode = store.token.userCode
  requester.post('/api/user/applyAccredit', state.businessForm).then((res: any) => {
    if (res.code == 200) {
      state.showBis = false
      ElMessageBox.confirm('客服人员将在2-3个工作日内与您取得联系', '提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning',
        center: true
      }).then(() => {
      }).catch(() => {

      });
    } else {
      ElMessage.error(res.msg)
    }

  }).catch((err: any) => {
    ElMessage.error(err.msg)
  })
}
const submitInfo = () => {
  state.form.userCode = store.token.userCode
  if (!state.form.nickName || state.form.nickName == '') {
    ElMessage.warning('请输入姓名')
    return
  }
  if (!state.form.mobile || state.form.mobile == '') {
    ElMessage.warning('请输入手机号')
    return
  }
  if (!state.form.code || state.form.code == '') {
    ElMessage.warning('请输入验证码')
    return
  }
  if (state.codeText == '获取验证码') {
    ElMessage.warning('请先发送验证码')
    return
  }
  requester.post('api/user/updUser', state.form).then((res: any) => {
    if (res.code == 200) {
      ElMessage.success('修改个人信息成功！')
      state.showInfo = false
      getUserInfo(true)

    } else {
      ElMessage.error(res.msg)
    }
  })
}


//图形上传成功钩子
function handleAvatarSuccess(res: any) {
  state.form.imageUrl = res.data.url;
}

// 手机验证码
function codeIntervalFunc() {
  state.codeInterval = setInterval(() => {
    state.codeNumber -= 1
    state.codeText = `${state.codeNumber}秒后获取`
    if (state.codeNumber == 0) {
      codeIntervalFunc()
      state.codeText = '获取验证码'
      state.codeNumber = 60
      state.codeInterval = null
    }
  }, 1000)
}

function beforeAvatarUpload(file: any) {
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    ElMessage.error('上传封面图片大小不能超过 2MB!');
  }
  return isLt2M;
}

//页面跳转
// function tabClick(e: any) {
//   state.pageValidate.pageNo = 1
//   state.total = 10
//   if (e.index == 0) release()
//   else buy()
// }

/**
 * 移动端跳转标签页
 * @param tab
 * @param event
 */
const tabClick = (tab: TabsPaneContext) => {
  //购买项目
  if (tab.props.name === "2") {
    getMyBuyOrderList()
  }
  //收益
  if (tab.props.name === "3") {
    accountInfo()
  }

}


//收益点击
const handleClick = (tab: TabsPaneContext) => {
  state.income = tab.props.name
  if (tab.props.name === "withdraw"){
    requester.post("/api/withdraw/myWithdrawList",state.withdrawPage).then(res =>{
      state.withdrawList = res.data.lists
    })
  }
}

//查询用户账户明细
function accountInfo() {
  state.account.userCode = store.token.userCode
  requester.post("/api/account/getAccount", {"userCode": store.token.userCode}).then(res => {
    incomeTotal.allEarnAmount = res.data.allEarnAmount
    incomeTotal.earnAmount = res.data.earnAmount
    incomeTotal.withdrawAmount = res.data.withdrawAmount
  })
  requester.post("/api/account/myAccountItemList", state.account).then(res => {
    state.accountList = res.data.lists
  })
}


//下载
function download(orderCode: any) {
  ElMessageBox.confirm('每位用户仅有一次下载机会，请注意保存，如有疑问点击右下角咨询客服', '提示', {
    confirmButtonText: '确定',
    type: 'warning',
    center: true
  }).then(() => {
    window.open(`https://xunyingcloud.cn/xcp/api/file/downloadPack?orderCode=${orderCode}&userCode=${state.user.userCode}`)
    window.location.reload();
  }).finally(() => {
  });
}

//支付
function pay() {
  state.orderLoading = true
  state.isUse = false
  requester.post('api/order/h5/pay', {
    orderCode: state.orderCode
  }).then((res: any) => {
    if (res.code == 200) {
      state.payUrl = res.data.payUrl
      state.totalFee = res.data.totalFee
      state.orderLoading = false
      state.isUse = true
      getOrder()
    }
  })
}

//轮询获取订单
function getOrder() {
  if (!state.isUse) return
  requester.post('/api/order/getOrder', {
    orderCode: state.orderCode,
    userCode: store.token.userCode
  }).then((res: any) => {
    if (res.data.status == 0) {
      setTimeout(() => {
        getOrder()
      }, 3000)
    }
    if (res.data.status == 2) {
      ElMessage.success('支付成功！')
      state.showOrder = false
    }
  })
}

//收益
function translate() {
  if (state.tabIndex == 3) return
  state.tabIndex = 3
  //查询账户明细
  accountInfo()
}

//购买项目
function buy() {
  // if (state.state.tabIndex == 2) return
  state.tabIndex = 2
  // state.tableData = []
  state.pageValidate.pageNo = 1
  getMyBuyOrderList()

  console.log( state.tableData)
}

//资源
function natural() {
  if (state.tabIndex == 4) return
  state.tabIndex = 4
  state.goodsList = []
  state.pageValidate.pageNo = 1
  getMyProductList()
}

function release() {
  if (state.tabIndex == 1) return
  state.tabIndex = 1
  state.goodsList = []
  state.pageValidate.pageNo = 1
  getMyProductList()
}

function toEdit(e:any){
  navigateTo('/resources/uploadResources?id='+e.productId)
}

function toDelete(e:any){
  console.log(e);
  let form = {
  productId: e.productId,
  userCode: store.token.userCode
}
  requester.post("/api/user/delMyProduct",form).then((res:any)=>{
    if(res.code == 200){
      ElMessage.success(res.msg)
      state.goodsList = []
      state.pageValidate.pageNo = 1
      getMyProductList()
    }else{
      ElMessage.error(res.msg)
    }

  })
}

onMounted(() => {
  //查看是否登录
  if (!store.getIsLogin()) {
    // 用户未登录，不继续执行后面的逻辑
    return;
  }

  if(route.query.tabIndex !== undefined){
    state.tabIndex = route.query.tabIndex
    getMyBuyOrderList();

    //资源管理
    if(state.tabIndex == 4){
      getMyProductList();
    }

  }else {
    getMyProductList();
  }

  //获取用户信息
  state.user = store.token
  state.width = document.documentElement.clientWidth;
  window.onresize = () => {
    state.width = document.documentElement.clientWidth;
    state.showBg = /Mobi|Android|iPhone/i.test(navigator.userAgent) || state.width < 720 ? false : true;
  };
  state.showBg = /Mobi|Android|iPhone/i.test(navigator.userAgent) || state.width < 720 ? false : true;

  getUserInfo(false);
  if (state.codeInterval != null) clearInterval(state.codeInterval);
  window.addEventListener("scroll", handleScroll);
})


</script>

<style scoped lang="scss">

:deep(.el-table) {
  &:deep(.el-table__header) {
    col[name="gutter"] {
      display: table-cell !important;
    }
  }
}

:deep(.el-space) {
  width: 100%;
}

:deep(.el-space__item) {
  width: 100%;
}

.natural-card{
  padding: 0;
  width: 100%;
  background-color: #ffffff;
}

.income {
  margin-bottom: 20px;
}

.separate-line {
  width: 1px;
  height: 40px;
  margin: 0px 15px;
  background-color: rgb(225, 230, 239);
}

.total-income {
  min-width: 336px;
  height: 150px;
  border-radius: 8px;

}

.amount-container {
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;

  .amount {
    display: flex;
    align-items: flex-end;
    color: rgb(53, 68, 93);

    .sign {
      font-size: 12px;
      font-weight: 500;
      line-height: 20px;
      margin-right: 2px;
    }

    .amount-number {
      font-weight: 700;
      font-size: 24px;
      line-height: 24px;
    }
  }
}

.bg {
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  height: 130px;
  background-image: url('https://modao.cc/mb-brand/images/square/bg_author_page.png');
  background-position: 50% 50%;
  background-size: 100% 180px;
  z-index: 0;
}

.page {
  background: #f6f7f8;
  padding: 113px;
  box-sizing: border-box;
  min-height: 100vh;
  margin: -8px;

  .jump_icon {
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 16px;
    position: absolute;
    z-index: 1;
    background: #fff;
    top: 20px;
    cursor: pointer;
  }
}

.left {
  width: 280px;
  background: #fff;
  position: absolute;
  top: 100px;
  height: 380px;
  border-radius: 10px;
  padding: 70px 20px 0;
  box-sizing: border-box;
}

.page .avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
  line-height: 120px;
  text-align: center;
  background: #1684fc;
  color: #fff;
  font-size: 30px;
  z-index: 9;
  margin-top: -80px;
  margin-left: 80px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 16px;
}

.avatar_img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
  z-index: 9;
  margin-top: -80px;
  margin-left: 80px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 16px;
}

.name {
  color: #222226;
  font-weight: 500;
  line-height: 24px;
  font-size: 20px;
  margin-right: 16px;
}

.intru {
  font-size: 13px;
  color: #999;
  margin: 20px 0;
}

.shenglue {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.ellipsis {

  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出部分的文本 */
  text-overflow: ellipsis; /* 使用省略号代替被隐藏的文本 */
}

.jiaoyi {
  padding-top: 10px;
  background: #fff;
  border-radius: 8px;
  width: 100%;
  min-height: 70vh;
  margin-top: 15px;
  padding: 15px;
  box-sizing: border-box;

  .order_item {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;

    div:first-child {
      width: 40%;
      font-size: 13px;
      color: #999;
    }

    div:last-child {
      color: #666;
      width: 60%;
    }
  }
}

.btn1 {
  border: 1px solid #c8cdd0;
  background: #fff;
  color: #5b6b73;
  padding: 13px 0;
  font-size: 14px;
  box-sizing: border-box;
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  bottom: 20px;
  right: 20px;
  left: 20px;
}

.tips {
  position: absolute;
  bottom: 120px;
  left: 0;
}

.icon {
  width: 14px;
  height: 14px;
  margin-left: 4px;
  transform: translateY(3px);
}

.redu {
  padding: 15px 20px;
  border-bottom: 1px solid #efefef;
  color: #666;
}

.good_phone {
  margin-right: 3%;
  padding: 5px;
  box-sizing: border-box;
  position: relative;
  width: 48.5%;
  background: #fff;
  border-radius: 10px;
}

.good_phone:nth-child(2n) {
  margin-right: 0;
}

.grid {
  display: flex;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  justify-content: space-between;
  flex-wrap: wrap;
}

.grid_item {
  width: 50%;
  height: 80px;
  text-align: center;
  line-height: 24px;
}

.num {
  font-size: 22px;
  color: #666;
  font-weight: 600;
}

.des {
  color: #888;
  font-size: 13px;
}

.right {
  background: #fff;
  height: 65px;
  border-bottom: 1px solid #c8cdd0;
  margin: -53px 0 0 300px;
  z-index: 9;
  position: relative;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
}

.right div {
  color: #5b6b73;
  font-size: 20px;
  padding: 20px 30px;
  margin-right: 20px;
  cursor: pointer;
}

.right .actived {
  color: #1684fc;
  border-bottom: 3px solid #1684fc;
  animation: jianxian 0.3s;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.content {
  margin-left: 300px;
  height: 80vh;
  overflow-y: auto;
}

.center {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

.ibGpke {
  display: flex;
  position: fixed;
  right: 10px;
  top: calc(50% - 103px);
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  overflow: hidden;
  width: 54px;
  height: 157px;
  background: rgb(22, 132, 252);
  box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 6px -4px, rgba(22, 132, 252, 0.37) 0px 6px 16px;
  padding: 15px 0px;
  border-radius: 27px;
  transition: height 0.2s ease 0s, top 0.2s ease 0s;
  cursor: pointer;
  z-index: 10;
}

.ibGpke:hover {
  background: rgb(22, 109, 202);
}

.ibGpke .upload-icon {
  flex-shrink: 0;
  width: 28px;
  height: auto;
  display: block;
  margin-bottom: 16px;
}

.goods {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  min-height: 330px;
  margin-top: 10px;
}

.good {
  margin: 0 10px 15px;
  padding: 5px;
  box-sizing: border-box;
  position: relative;
  border-radius: 10px;
}

.good:hover {
  background: #fff;
  box-shadow: 1px 1px 5px #00000020;
}

.good .pic {
  width: 304px;
  height: 228px;
  border-radius: 8px;
}

.goods_status {
  position: absolute;
  bottom: 82px;
  width: 304px;
  background: #00000070;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  z-index: 999;
  border-radius: 0 0 10px 10px;
}

.name {
  margin: 10px 0;
  font-size: 16px;
}

.user {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 13px;
}

.logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 8px;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.user_name {
  width: 50%;
  justify-content: unset;
}

.actionIcon {
  transition: all 0.15s ease-in-out 0s;
  width: 12px;
  height: 12px;
  margin-right: 3px;
}

a:-webkit-any-link {
  text-decoration: none;
  color: #415058;
}

.goods_end {
  text-align: center;
  color: #6c6c6c;
  width: 100%;
  padding-bottom: 30px;
  margin-top: 30px;
}

.avatar-uploader {
  position: relative;

  :deep(.el-upload) {
    border: 1px dashed #d9d9d9;
    width: 100px;
    height: 100px;
    border-radius: 6px;
  }

  :deep(.el-upload:hover)  {
    background: #cfd6de20;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
}

.inowa.orders-table {
  width: 100%;
  border: 1px solid rgb(225, 230, 239);
  border-radius: 8px;
}

:deep(.el-input input::-webkit-outer-spin-button),
:deep(.el-input input::-webkit-inner-spin-button) {
  -webkit-appearance: none !important;
}

:deep(.el-input input[type="number"]) {
  -moz-appearance: textfield;
}

:deep(.el-input .el-input__inner) {
  line-height: 1px !important;
}

.inowa.orders-table .order-head {
  display: flex;
  height: 48px;
  background: rgb(247, 247, 249);
  border-bottom: 1px solid rgb(225, 230, 239);
  border-radius: 8px 8px 0px 0px;
  padding-left: 30px;
}

.inowa.orders-table .order-head .head-item {
  flex: 1 0 0px;
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: rgb(53, 68, 93);
}

#square ol, #square ul {
  list-style: none;
}

.inowa.orders-table ul.order-items {
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.inowa.orders-table ul.order-items li.order-item:last-child {
  border-bottom: 0px;
}

.inowa.orders-table ul.order-items li.order-item {
  display: flex;
  border-bottom: 1px solid rgb(225, 230, 239);
  overflow: hidden;
  padding-left: 30px;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
  unicode-bidi: isolate;
}

.inowa.orders-table ul.order-items li.order-item .content-item {
  flex: 1 0 0px;
  min-height: 60px;
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  color: rgb(93, 111, 143);
  white-space: nowrap;
  width: 16.66%;
}

.amount {
  color: rgb(255, 113, 0);
}

.inowa.orders-table ul.order-items li.order-item .content-item.link {
  color: rgb(22, 132, 252);
}

.inowa.orders-table ul.order-items li.order-item .content-item.buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 15px 0px;
}

.charge {
  width: 88px;
  height: 30px;
  color: rgb(255, 255, 255);
  background: rgb(41, 141, 248);
  border-radius: 4px;
  border: none;
  font-weight: 400;
}

.inowa.orders-table ul.order-items li.order-item .content-item.buttons .cancel {
  width: 88px;
  margin-top: 8px;
  text-align: center;
  background: #fff;
  border: none;
  height: 30px;
  color: rgb(65, 80, 88);
}

.order {
  border: 1px solid #d4e8fc;
  border-radius: 10px;
  position: relative;
  padding: 15px;

  .vip {
    background: #d4e8fc;
    color: #1684fc;
    padding: 4px 14px;
    top: 0;
    left: 0;
    position: absolute;
    border-radius: 10px 0 10px 0;
  }

  .shoukuan_code {
    display: flex;
  }

  .pay_method {
    margin-top: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;

    img {
      width: 24px;
      margin-right: 5px;
    }
  }
}

@keyframes jianxian {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
